import React from 'react';
import styles from './style';
import {
  Text,
  SafeAreaView,
  ImageBackground,
  Image,
  View,
  TouchableOpacity,
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Back from '../../common/component/back';
import ListImg from '../../common/component/listImg';
import { back } from 'react-native/Libraries/Animated/src/Easing';
const avatar =  require('../../common/img/head.jpg')
const scStart =require('../../common/img/scStart.png')
const scStart2= require('../../common/img/scStart2.png')
const meaasge = require('./img/message.png')
export default class SelfWork extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isPress:false,
    };
  }
  render() {
    let {navigation} = this.props;
    let {isPress} = this.state;
    _refreshMsssage= (csid) =>{
      this.setState({isPress:!csid});
    }
    return (
        <SafeAreaView style={styles.content}>
          <Back navigation={navigation} witheIcon />
          <View style={styles.authStyle}>
             <Image source={avatar} style={styles.authImg}></Image>
             <View style={styles.autnName}>
                <Text style={styles.topText}>倾听她的事</Text>
                <Text style={styles.bottomText}>每个人都有快乐的时候，你呢？</Text>
             </View>
             <View style={styles.rightImg}>
             <TouchableOpacity onPress={() => _refreshMsssage(isPress)}>
                <View style={[styles.imgStyle,{ backgroundColor: isPress? 'rgb(246,176,30)' : 'rgb(90,90,90)' }]}>
                    <Animatable.Image source={isPress? scStart2:scStart} style={styles.imgSize} animation={isPress? "zoomIn": ''} delay={isPress? 300:0 }></Animatable.Image>
               </View> 
             </TouchableOpacity>
             
               <View style={styles.imgStyle}>
               <Image source={meaasge} style={styles.imgSize}></Image>
               </View>
             </View>
          </View>
          <View style={styles.authStyle}>
          </View>
         <Animatable.View style={styles.contentText} animation='slideInUp'>
           <View style={styles.selfDis}>
              <View style={styles.leftDis}>
                <Text style={styles.leftText}>他的作品</Text>
            </View>
            <View style={styles.rightDis}>
              <View style={styles.rightText}>
                <Text style={styles.rightTopText}>97</Text>
                <Text style={styles.rightBottomText}>人气</Text>
              </View>
            <TouchableOpacity onPress={() => navigation.navigate( 'Fans',{ title: '我的粉丝'})}>
            <View style={styles.rightText}>
                <Text style={styles.rightTopText}>634</Text>
                <Text style={styles.rightBottomText}>粉丝</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => navigation.navigate( 'Fans',{ title: '我关注的'})}>
              <View style={styles.rightText}>
                <Text style={styles.rightTopText}>97</Text>
                <Text style={styles.rightBottomText}>关注</Text>
              </View>
            </TouchableOpacity>
            </View>
          </View>
          <ListImg navigation={navigation}/>
        </Animatable.View>
      </SafeAreaView>
    );
  }
}
